<!--
 * @Author: 曹捷
 * @Date: 2020-06-13 22:05:29
 * @LastEditors: 曹捷
 * @LastEditTime: 2020-06-13 22:26:10
 * @Description: APP打开进入的页面 ，可以扩展开机广告或者界面展示
--> 
<template>
  <view class="content">
    <image :src="url" class="start-img" />
    <view @tap="launchFlag()" class="jump-over">{{jumpover}}</view>
    <view @tap="launchFlag()" class="experience">{{experience}}</view>
  </view>
</template>

<script>
export default {
  props: {
    url: {
      type: String
    },
    waitTime: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      duration: this.waitTime,
      jumpover: '跳过',
      experience: '立即体验',
      time: ''
    }
  },
  mounted() {
    this.initTime()
  },
  methods: {
    initTime() {
      // this.jumpover = this.duration + 's'
      // this.duration--
      this.time = setInterval(() => {
        this.jumpover = this.duration + ' S'
        this.duration--
        if (this.duration < 0) {
          // clearInterval(this.time)
          this.launchFlag()
        }
      }, 1000)
    },
    launchFlag: function() {
      clearInterval(this.time)
      uni.switchTab({
        url: '/pages/tabbar/ahome/ahome'
      })
    }
  }
}
</script>
<style>
page,
.content {
  width: 100%;
  height: 100%;
  background-size: 100% auto;
  padding: 0;
}
.start-img {
  width: 100%;
  height: 100%;
}
.swiper-item-img image {
  width: 80%;
}
.uniapp-img {
  height: 20%;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.uniapp-img image {
  width: 40%;
}

.jump-over,
.experience {
  position: absolute;
  height: 60upx;
  line-height: 60upx;
  padding: 0 40upx;
  border-radius: 30upx;
  font-size: 32upx;
  color: #454343;
  border: 1px solid #454343;
  z-index: 999;
}
.jump-over {
  right: 45upx;
  top: 125upx;
}
.experience {
  right: 50%;
  margin-right: -105upx;
  bottom: 10%;
}
</style>
